{% extends 'home/public/base.html' %}


{% block title %}
    <title>购物车-我的购物车</title>
{% endblock %}


{% block css %}
<link rel="stylesheet" type="text/css" href="/static/home/css/cart.css">
<link rel="stylesheet" type="text/css" href="/static/home/css/cart-app.css">
{% endblock %}

{% block paths %}
<div class="navbar-left">
    <ol class="breadcrumb">
        <li class="active" style="color:#00c3f5;">购物车</li>
        <li>确认订单</li>
        <li>在线支付</li>
        <li>完成 </li>
    </ol>
</div>
{% endblock %}


{% block con %}
<div class="mainbody cart" style="padding-top: 80px;">
    <div class="container">
        <!-- 购物车详情头 -->
        <table class="cart-header">
            <tbody>
                <tr>
                    <td class="cart-col-select col-md-3 col-xs-3 col-sm-3">
                        <div class="cart-select-all JSelectAll">
                            <div class="mz-checkbox"></div>
                            <span class="cart-select-title">全选</span>
                        </div>
                    </td>
                    <td class="cart-col-name col-md-3 hidden-xs hidden-sm">商品</td>
                    <td class="cart-col-price col-md-2 hidden-xs hidden-sm">单价(元)</td>
                    <td class="cart-col-number col-md-2 hidden-xs hidden-sm">数量</td>
                    <td class="cart-col-total col-md-1 hidden-xs hidden-sm">小计(元)</td>
                    <td class="cart-col-ctrl col-md-1 hidden-xs hidden-sm">操作</td>
                </tr>
            </tbody>
        </table><!-- 购物车详情头 E-->
        
        <!-- 购物清单信息列表 -->
        <div class="cart-merchant-list">
            <div class="cart-merchant">
                <table class="cart-merchant-body">
                    <tbody>
                       
                    {% for v in request.session.Cart.values %}
                        <tr class="cart-product"  gid="{{ v.gid }}">
                            <td class="cart-col-select col-md-3 col-xs-4 col-sm-4">  
                                <div class="mz-checkbox "></div> 
                                <a href="meilanx.html" class="cart-product-link" target="_blank">
                                    <img src="{{ v.pic }}" class="cart-product-img" alt="魅蓝 X">
                                </a>
                            </td>
                            <td class="cart-col-name col-md-3 col-xs-8 col-sm-8">
                                <a href="meilanx.html" class="cart-product-link" target="_blank">
                                  <p>{{ v.title }}</p>
                                </a>
                            </td>
                            <td class="cart-col-price col-md-2 hidden-xs hidden-sm">
                                <p>
                                    <span class="cart-product-price">{{ v.price }}</span>
                                </p>
                            </td>
                            <td class="cart-col-number col-md-2 hidden-xs hidden-sm">
                                <div class="cart-product-number-adder">
                                    <p class="cart-product-number-max show"></p>
                                    <div class="mz-adder">
                                        <button  class="mz-adder-subtract" edit="-"></button>
                                        <div class="mz-adder-num"><input class="mz-adder-input" value="{{ v.num }}" type="text"></div>
                                        <button  class="mz-adder-add" edit="+" ></button>
                                    </div>
                                </div>
                            </td>
                            {% load pagetag %}
                            <td class="cart-col-total col-md-1 hidden-xs hidden-sm">
                                <span class="cart-product-price total">{% ShowTotal v.num v.price %}</span>
                            </td>
                            <td class="cart-col-ctrl col-md-1 hidden-xs hidden-sm">
                                <div class="cart-product-remove">
                                    <a href="{% url 'myhome_cartdelete' v.gid %}"><span class="glyphicon glyphicon-remove"></span></a>
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div><!-- 购物清单信息列表 E-->
    </div>
    <!-- 结算详情 -->
    <div class="cart-footer" id="cartFooter">
        <div class="container">
           <div class="cart-footer-left col-md-6 col-xs-4 col-sm-4">
               <div class="cart-select-all JSelectAll" data-mdesc="全选按钮" data-mtype="store_cart_all">
                    <div class="mz-checkbox"></div>
                    <span class="cart-select-title">全选</span>
               </div>
               <!-- <span class="cart-remove-selected" id="removeSelected">删除选中的商品</span> -->
               <span class="cart-footer-count">
                    共
                    <span class="cart-footer-num" id="totalCount">5</span>
                    件商品
               </span>
            </div>
            <div class="cart-footer-right col-md-5 col-md-offset-1 col-sm-offset-2 col-xs-8 col-sm-6">
                <span class="cart-footer-sum">
                    <span class="cart-footer-text">已优惠</span>
                    <span class="cart-footer-num red" id="totalDiscount">0.00</span>
                    <span class="cart-footer-text">元， 合计(不含运费)：</span>
                    <span class="cart-footer-total" id="totalPrice">0.00</span>
                </span>
                <div class="mz-btn success" id="cartSubmit">去结算</div>
            </div>
        </div>
    </div><!-- 结算详情 E-->
</div>
{% endblock %}

{% block js %}
<script type="text/javascript">
   //回顶部
    backTop();
    //登录图片鼠标经过
    topLogin();
    //全选
    allSelect();

   
    // 绑定 去结算 单击事件
    $('#cartSubmit').click(function(){
        // 当前是否登录
        var VipUser = '{{ request.session.VipUser }}'
        if(!VipUser){
            alert('请先登录')
            location.href="/login/"
            return;
        }
        // 是否选择了商品
        ids = totalNum()
        if(ids.length == 0 ){
            alert('请选择要购买的商品')
            return;
        }
        location.href="{% url 'myhome_orderconfirm'%}?ids="+ids
    })


    // 运算总价
    function totalNum(){
        totalprice = 0
        ids = []
        // 获取所有已经选中的元素的小计价格        each有几个就循环几次
        $('.cart-merchant-body').find('.checked').each(function(){
            total = Number($(this).parents('tr').find('.total').text())
            totalprice += total
             gid = $(this).parents('tr').attr('gid')
             ids.push(gid)
 })
        $('#totalPrice').text(totalprice)
        return ids
    }


    // 数据的修改
    
    $('.mz-adder-subtract,.mz-adder-add').click(function(){
        // 获取当前元素的 数量
        var num = $(this).parent().find('input').val()
        // 获取当前的元素的edit属性
        var edit = $(this).attr('edit')
       if(edit == '+' ){
        num ++
       }else{
        num --
       }
       if(num <= 1){
        num = 1
       }
       // 修改数量
       $(this).parent().find('input').val(num)

       // 获取当前元素的商品的id
       var gid = $(this).parents('tr').attr('gid')
       // 通过链接的方式跳转 发送请求
       location.href="{% url 'myhome_cartedit' %}?gid="+gid+"&num="+num

    })
</script>
{% endblock %}